<template>
  <!-- 名字 -->
  <div>{{ iphone.name }}</div>
  <!-- 数量按钮 -->
  <button @click="iphone.number--">-</button>
  {{ iphone.number }}
  <button @click="iphone.number++">+</button>
  <!-- 总价 -->
  <div>总价: {{ totalPrice }}</div>
</template>

<script setup>
import { reactive, computed } from 'vue'

const iphone = reactive({
  name: '苹果',
  price: 33,
  number: 1
})

// 计算属性计算总价
const totalPrice = computed(() => {
  return iphone.price * iphone.number
})

</script>